#極域グラフ

極面グラフは円グラフに似ていますが、各セグメントの角度は同じであり、セグメントの半径は値に応じて異なります。

このタイプのグラフは、円グラフに似た比較データを表示するだけでなく、コンテキストの値のスケールも表示する場合に便利です。

const config = {
  type: 'polarArea',
  data: data,
  options: {}
};

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
    'Grey',
    'Blue'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [11, 16, 7, 3, 14],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(75, 192, 192)',
      'rgb(255, 205, 86)',
      'rgb(201, 203, 207)',
      'rgb(54, 162, 235)'
    ]
  }]
};

#データセットのプロパティ

名前空間:

• data.datasets[index]- このデータセットのみのオプション
• options.datasets.polarArea- すべてのpolarAreaデータセットのオプション
• options.elements.arc- すべてのオプション円弧要素
• options- チャート全体のオプション

次のオプションを極面グラフ データセットに含めて、その特定のデータセットのオプションを構成できます。

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

#全般的

#スタイリング

各円弧のスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

#境界線の配置

次の値がサポートされていますborderAlign。

• 'center'（デフォルト）
• 'inner'

いつ'center'を設定すると、隣り合う円弧の境界線が重なり合います。いつ'inner'が設定されている場合、すべての境界線が重ならないことが保証されます。

#インタラクション

各アークとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

#設定オプション

これらは、極面グラフに固有のカスタマイズ オプションです。これらのオプションはアクセス時に検索され、グローバル チャートのデフォルト オプションチャートのオプション。

極面グラフでは、ラジアルリニア規模。追加の構成はスケールを介して提供されます。

#デフォルトのオプション

作成される PolarArea タイプごとにこれらのデフォルト値を変更することもできます。このオブジェクトは次の場所で入手できます。Chart.overrides.polarArea。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

たとえば、すべての新しい極面グラフを次のように設定するには、animateScale = falseあなたならこうします:

Chart.overrides.polarArea.animation.animateScale = false;

#データ構造

極面グラフの場合、データセットにはデータ ポイントの配列が含まれている必要があります。データ ポイントは数値である必要があり、Chart.js はすべての数値を合計し、それぞれの相対的な割合を計算します。

また、各スライスにツールヒントが正しく表示されるように、ラベルの配列を指定する必要があります。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],
    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};